<template>
  <scroll-view
    scroll-y
    class="scroll-view flex-1"
    refresher-enabled
    enable-back-to-top
    :refresher-triggered="refresherTriggered"
    @refresherrefresh="onRefresherrefresh"
    @scrolltolower="getDataList"
  >
    <view class="common-container">
      <template v-if="dataList.length">
        <ActivityBox v-for="item in dataList" :key="item.id" :info="item" :is-custom="true">
          <template #operate>
            <wd-tag
              custom-class="common-status-tag"
              :bg-color="returnStatusColor(item.status, activityDeclareStatus)"
              @click="clickTag(item)"
            >
              {{ item.status_dictText }}
            </wd-tag>
          </template>
        </ActivityBox>
      </template>
      <template v-else>
        <wd-status-tip image="content" tip="暂无内容" />
      </template>
    </view>
    <wd-loadmore
      v-if="dataList.length"
      finished-text="没有更多了"
      :state="loadState"
      @reload="getDataList"
    />
    <wd-message-box>
      <view class="message-list">
        <view class="message-item" v-for="(item, index) in refuseMessage" :key="index">
          <view>驳回时间：{{ item.createTime }}</view>
          <view>驳回内容：{{ item.note }}</view>
        </view>
      </view>
    </wd-message-box>
  </scroll-view>
</template>

<script setup>
import ActivityBox from '@/components/ActivityBox.vue'
import ApplicationApi from '@/service/application'
import { returnStatusColor } from '@/utils'
import { useDictStore } from '@/store/dict'
import { useMessage } from 'wot-design-uni'
import OrderApi from '@/service/order'

const message = useMessage()

const { activityDeclareStatus } = useDictStore().dictData

const refuseMessage = ref([])
const clickTag = async (info) => {
  console.log('click', info)
  // 如果是“驳回”，就弹窗提示驳回的原因
  if (info.status === 'refuse') {
    const { code, result } = await OrderApi.getRefuseMessage({ declareId: info.id })
    if (code === 200 && result) {
      refuseMessage.value = result
      message
        .confirm({
          title: '驳回理由',
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}

const loadState = ref('loading')
const pageObj = ref({
  pageNo: 1,
  pageSize: 10,
})
const dataList = ref([])

const getDataList = async () => {
  if (loadState.value === 'finished') return
  try {
    const params = {
      ...pageObj.value,
      order: 'desc',
      column: 'createTime',
    }
    const { code, result } = await ApplicationApi.getBookingActivityList(params)
    if (code === 200 && result) {
      const { records, pages } = result
      if (records?.length) {
        dataList.value = [...dataList.value, ...records]
      }
      if (pageObj.value.pageNo < pages) {
        pageObj.value.pageNo++
      } else {
        loadState.value = 'finished'
      }
    } else {
      loadState.value = 'error'
    }
  } catch (e) {
    loadState.value = 'error'
  }
}

const reset = () => {
  pageObj.value.pageNo = 1
  dataList.value = []
  loadState.value = 'loading'
}

const refreshList = () => {
  reset()
  getDataList()
}

const refresherTriggered = ref(false)
const onRefresherrefresh = async () => {
  refresherTriggered.value = true
  // 重置分页数据，刷新接口
  reset()
  await getDataList()
  refresherTriggered.value = false
}

onLoad(() => {
  refreshList()
})
</script>

<style lang="scss" scoped>
.scroll-view {
  width: 100%;
  height: calc(100vh - 46px);
}

.message-list {
  .message-item {
    padding-bottom: $uni-spacing-col-base;
    margin-bottom: $uni-spacing-col-base;
    text-align: left;
    border-bottom: 1px solid $uni-border-color;

    &:last-child {
      border: 0;
    }
  }
}
</style>
